@using System.Threading.Tasks
@using SimplCommerce.Module.Catalog.ViewModels
@addTagHelper *, SimplCommerce.Infrastructure

@model ProductsByCategory
@{
    ViewBag.Title = Model.CategoryName;
}

@section head {
    <link simpl-append-version="true" rel="stylesheet" href="~/lib/nouislider/nouislider.min.css"/>
}

<div>
    <ol class="breadcrumb">
        <li><a href="~/">Home</a></li>
        @if (Model.ParentCategorId.HasValue)
        {
            @await Component.InvokeAsync("CategoryBreadcrumb", new { categoryId = Model.ParentCategorId.Value })
        }
        <li><span class="active">@Model.CategoryName</span></li>
    </ol>
</div>
<div class="row">
    <div class="col-md-3 product-list-filters">
        <h3>@Localizer["Filter by"]</h3>
        <form id="productFilter" name="productFilter" method="GET" action="~/@Model.CategorySeoTitle">
            <div class="panel-group" id="accordion-brand">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-brand" href="#collapse-brand">
                                @Localizer["Brand"]
                                <i class="fa fa-angle-down"></i>
                            </a>
                        </h2>
                    </div>
                    <div id="collapse-brand" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul class="list-unstyled checkbox-list">
                                @foreach (var brand in Model.FilterOption.Brands)
                                {
                                    <li>
                                        <label class="checkbox">
                                            <input type="checkbox" value="@brand.SeoTitle" name="brand" checked="@Model.CurrentSearchOption.GetBrands().Contains(brand.SeoTitle)">
                                            @brand.Name
                                            <small>(@brand.Count)</small>
                                        </label>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @if (Model.FilterOption.Price.MaxPrice != Model.FilterOption.Price.MinPrice) {
            <div class="panel-group" id="accordion-price">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-price" href="#collapse-price">
                                @Localizer["Price"]
                                <i class="fa fa-angle-down"></i>
                            </a>
                        </h2>
                    </div>
                    <div id="collapse-price" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div id="priceSlider"></div>
                            <div>
                                <input type="hidden" id="originMinPrice" value="@Model.FilterOption.Price.MinPrice.ToString("F0")"/>
                                <input type="hidden" id="originMaxPrice" value="@Model.FilterOption.Price.MaxPrice.ToString("F0")" />
                                <span id="minPrice"></span>
                                <span id="maxPrice"></span>
                            </div>
                            <div class="price-actions">
                                <button id="reset-price" type="button" class="btn btn-default">Reset</button>
                                <button id="apply-price" type="button" class="btn btn-default">Apply</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            }
        </form>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-sm-6 category-result">
                <h2>@Model.CategoryName</h2>
                <small class="badge-results">@Model.TotalProduct @Localizer["results"]</small>
            </div>
            <div class="col-sm-6">
                <ul class="list-inline clear-both product-list-display-options">
                    <li class="show-option">
                        <a href="#"><i class="fa fa-th-list"></i></a>
                        <a href="#"><i class="fa fa-th"></i></a>
                    </li>
                    <li class="sort-by">
                        <label>@Localizer["Sort by:"]</label>
                        <div class="btn-group">
                            <select asp-for="CurrentSearchOption.Sort" asp-items="Model.AvailableSortOptions" class="form-control"></select>
                        </div>
                    </li>
                    @*<li class="pagination-option">
                        <label>Show :</label>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                20 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">All</a></li>
                                <li><a href="#">50</a></li>
                                <li><a href="#">30</a></li>
                            </ul>
                        </div>
                    </li>*@
                </ul>
            </div>
        </div>
        <div class="row product-list">
            @foreach (var product in Model.Products)
            {
                <div class="col-xs-6 col-md-4">
                    @await Html.PartialAsync("_ProductThumbnail", product)
                </div>
            }
        </div>
        <div class="row">
            <div class="col-md-12 text-right">
                <cs-pager cs-paging-pagesize="@Model.CurrentSearchOption.PageSize"
                          cs-paging-pagenumber="@Model.CurrentSearchOption.Page"
                          cs-paging-totalitems="@Model.TotalProduct"
                          cs-pagenumber-param="page"
                          asp-basehref="~/@Model.CategorySeoTitle"
                          asp-all-route-data="@Model.CurrentSearchOption.ToDictionary()"></cs-pager>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script simpl-append-version="true" src="~/lib/wnumb/wNumb.js"></script>
    <script simpl-append-version="true" src="~/lib/nouislider/nouislider.min.js"></script>

    <script>
        var productFilter = {};
        productFilter.currentSearchOption = @Html.Raw(Model.CurrentSearchOption.ToJson());
        productFilter.priceSetting = {
            min: @Model.FilterOption.Price.MinPrice.ToString("F0"),
            max: @Model.FilterOption.Price.MaxPrice.ToString("F0"),
            currentMin: @((Model.CurrentSearchOption.MinPrice ?? Model.FilterOption.Price.MinPrice).ToString("F0")),
            currentMax: @((Model.CurrentSearchOption.MaxPrice ?? Model.FilterOption.Price.MaxPrice).ToString("F0"))
        };
    </script>
    <script simpl-append-version="true" src="~/modules/catalog/product-filter.js"></script>
}